<template>
      <div>
        <!-- 轮播图 -->
          <mt-swipe :auto="2000">
              <mt-swipe-item v-for="(item, index) in filterImgs" :key="index">
                 <img :src="item.thumbnail_pic_s">
              </mt-swipe-item>
          </mt-swipe>
        <!-- 六宫格 -->
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="/home/newsList">
		                   <img src="../../images/menu1.png" alt="">
		                    <div class="mui-media-body">新闻资讯</div>
                        </router-link>
                        </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photoList">
		                    <img src="../../images/menu2.png" alt="">
		                    <div class="mui-media-body">图片分享</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu3.png" alt="">
		                    <div class="mui-media-body">商品购买</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu4.png" alt="">
		                    <div class="mui-media-body">留言反馈</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu5.png" alt="">
		                    <div class="mui-media-body">视频专区</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu6.png" alt="">
		                    <div class="mui-media-body">联系我们</div></a></li>
		        </ul>

      </div>
</template>

<script>
export default {
  data () {
    return {
        imgsList: []
     }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')
      .then( res => {
        console.log(res.data.result)
        this.imgsList = res.data.result.data
    })
    .catch( err => {
        console.log('轮播图异常' + err);
      })
    }
  },
  computed: {
    filterImgs(){
      return this.imgsList.slice(0, 3)
    }
  }
}
</script>

<style lang="less" scoped>
      .mint-swipe {
        height:200px;

          .mint-swipe-item {
            &:nth-child(1) {
                background: pink;
            }
            &:nth-child(2) {
                background: blue;
            }
            &:nth-child(3) {
                background: gray;
            }

         img {
            width: 100%;
            height:100%;
            }
          }
        }
       .mui-grid-view.mui-grid-9 {
            background: #fff;
            border: none;
          img {
            width: 60px;
            height: 60px;
          }
          .mui-media-body {
            font-size: 13px;
          }
        }
        .mui-grid-view.mui-grid-9 .mui-table-view-cell {
          border: none;
        }

</style>
